<script setup name="ProductCurd">
import { productGetPictureList, productEdit, productAdd, productDel } from "@/api/wms/product";
import { getCurrentInstance, reactive } from "vue";
import Picture from "@/views/sys/attachment/Attachments/picture.vue"
const { proxy } = getCurrentInstance();
let pd = reactive({
  open: false,
  title: "",
  operation: 0,
  pictureIds: [],
  form: {
    pictureId: [],
    picturePd: []
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    name: null,
    mobile: null
  },
  rules: {
    name: [{
      required: true,
      message: "名称不能为空",
      trigger: "blur"
    }],
    packingUnit: [{
      required: true,
      message: "库存单位不能为空",
      trigger: "change"
    }],
    measureUnit: [{
      required: true,
      message: "计量单位不能为空",
      trigger: "change"
    }],
    packingQuantity: [{
      required: true,
      message: "包装数量不能为空",
      trigger: "change"
    }],
    price: [{
      required: true,
      message: "价格不能为空",
      trigger: "change"
    }],
    isStock: [{
      required: true,
      message: "是否库存产品不能为空",
      trigger: "change"
    }],
    enableFlag: [{
      required: true,
      message: "是否不能为空",
      trigger: "change"
    }]
  }
});

function handleAccomplish(list) {
  console.log(list);
  pd.pictureIds = []
  list.forEach(element => {
    pd.pictureIds.push(element.id)
  });
}

/** 提交按钮 */
function submitForm() {
  let index = 0
  pd.pictureIds.forEach(item => {
    pd.form.picturePd.push(
      {
        productId: pd.form.id,
        pictureId: item,
        sort: index
      }
    )
    index++
  })
  proxy.$refs["productRef"].validate(valid => {
    if (valid) {
      if (pd.operation === 1) {
        productAdd(pd.form).then(res => {
          proxy.$modal.msgSuccess("新增成功");
          emit("ok", pd.operation);
        });
      } else if (pd.operation === 2) {
        productEdit(pd.form).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          emit("ok", pd.operation);
        });
      }
      pd.open = false;
    }
  });
}

// 新增
function add() {
  reset();
  pd.title = "新增产品";
  pd.operation = 1;
  pd.open = true;
}

// update
function edit(product) {
  reset();
  productGetPictureList({productId: product.id}).then(res => {
    //合并
    pd.form = { ...pd.form, ...product };
    pd.form.pictureId = res.data;
    pd.title = "修改产品";
    pd.operation = 2;
    pd.open = true;
  })
}

// del
function del(id) {
  pd.operation = 3;
  proxy.$modal.confirm('是否确认删除产品编号为:"' + id + '"的数据项？').then(function () {
    return productDel(id);
  }).then(() => {
    proxy.$modal.msgSuccess("删除成功");
    pd.open = false;
    emit("ok", pd.operation);
  }).catch(() => {
  });
}

// 表单重置
function reset() {
  pd.form = {
    id: null,
    name: null,
    groupId: null,
    specification: null,
    packingUnit: null,
    measureUnit: null,
    packingQuantity: null,
    price: null,
    treeId: null,
    attrValue: null,
    isStock: null,
    enableFlag: "0",
    remark: null,
    pictureId: [],
    picturePd: []
  };
  pd.operation = 0;
  pd.title = "";
  proxy.resetForm("productRef");
}

defineExpose({ add, edit, del });
const emit = defineEmits(["ok"]);

</script>

<template>
  <!-- 添加或修改产品对话框 -->
  <el-dialog :title="pd.title" v-model="pd.open" width="700px" append-to-body>
    <el-form ref="productRef" :model="pd.form" :rules="pd.rules" label-width="80px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="名称" prop="name">
            <el-input v-model="pd.form.name" placeholder="请输入名称" />
          </el-form-item>
          <el-form-item label="库存单位" prop="packingUnit">
            <el-input v-model="pd.form.packingUnit" placeholder="请输入库存单位" />
          </el-form-item>
          <el-form-item label="产品单价" prop="price">
            <el-input v-model="pd.form.price" placeholder="请输入产品单价" />
          </el-form-item>
          <el-form-item label="是否库存" prop="isStock">
            <el-switch v-model="pd.form.isStock" active-value="0" inactive-value="1" active-text="库存"
              inactive-text="服务" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="规格" prop="name">
            <el-input v-model="pd.form.specification" placeholder="请输入规格" />
          </el-form-item>
          <el-form-item label="计量单位" prop="measureUnit">
            <el-input v-model="pd.form.measureUnit" placeholder="请输入计量单位" />
          </el-form-item>
          <el-form-item label="产品类别" prop="treeId">
            <el-input v-model="pd.form.treeId" placeholder="请输入产品类别" />
          </el-form-item>
          <el-form-item label="启用" prop="enableFlag">
            <el-switch v-model="pd.form.enableFlag" active-value="0" inactive-value="1" />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="多品类" prop="groupId">
            <el-input v-model="pd.form.groupId" placeholder="请输选择多品类" />
          </el-form-item>
          <el-form-item label="包装数量" prop="packingQuantity">
            <el-input v-model="pd.form.packingQuantity" placeholder="请输入包装数量" />
          </el-form-item>
          <el-form-item label="产品属性" prop="attrValue">
            <el-input v-model="pd.form.attrValue" placeholder="请输入产品属性" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="pd.form.remark" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="图片上传" prop="pictureId">
        <Picture :idList="pd.form.pictureId" :styleType="false" :limit="9" @ok="handleAccomplish" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="pd.operation === 1" type="primary" @click="submitForm">新 增</el-button>
        <el-button v-if="pd.operation === 2" type="success" @click="submitForm">修 改</el-button>
        <el-button v-if="pd.operation === 2" type="danger" @click="del(pd.form.id)">删 除</el-button>
        <el-button type="info" @click="pd.open = false">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang='scss' scoped></style>